<script setup>
import { Edit, Key, Van } from '@element-plus/icons-vue'
import { updateUserInfo, updatePwd } from '../../../api/userInfo'
import { useUserStore } from '../../../stores/user'
import { useUserInfoStore } from '../../../stores/userInfo';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const userStore = useUserStore()
const userInfoStore = useUserInfoStore()
let myInfo = ref({})
let userinfo = ref(false)
let password = ref(false)
function close() {
  userinfo.value = false
  password.value = false
}
const changeInfo = (option) => {
  if (option === 'userinfo') {
    userinfo.value = true
  }
  else if (option === 'password') {
    password.value = true
  }
  else {
    userStore.logout()
    location.reload()
  }

}

async function getMyinfo() {
  await userInfoStore.getUserInfoData()
  myInfo.value = userInfoStore.myInfo
}
getMyinfo()

async function saveInfo() {
  try {
    let res = await updateUserInfo(myInfo.value)
    ElMessage.success(res.message)
  } catch (err) {
    ElMessage.error(err.message)
  } finally {
    setTimeout(() => {
      location.reload()
    }, 1000);
  }
}
async function savePassword() {
  //不能为空
  if (myPwd.value.oldPwd === '' || myPwd.value.newPwd === '' || myPwd.value.confirmPwd === '') {
    ElMessage.error('密码不能为空')
    return
  }
  if (myPwd.value.newPwd !== myPwd.value.confirmPwd) {
    ElMessage.error('两次输入的密码不一致')
    return
  }
  if (myPwd.value.oldPwd === myPwd.value.newPwd) {
    ElMessage.error('新密码不能与旧密码相同')
    return
  }
  if (myPwd.value.newPwd.length < 6) {
    ElMessage.error('密码长度不能小于6位')
    return
  }
  if (myPwd.value.newPwd.length > 20) {
    ElMessage.error('密码长度不能大于20位')
    return
  }

  try {
    let res = await updatePwd(myPwd.value)
    ElMessage.success(`${res.message}`)
  } catch (err) {
    ElMessage.error(`${err.message}`)
  } finally {
    myPwd.value.oldPwd = ''
    myPwd.value.newPwd = ''
    myPwd.value.confirmPwd = ''
    location.reload()
  }

}

let myPwd = ref({
  oldPwd: '',
  newPwd: '',
  confirmPwd: ''
})

</script>

<template>
  <ul>
    <li>
      <el-link :icon="Edit" type="primary" @click="changeInfo('userinfo')">
        &nbsp;修改信息
      </el-link>
    </li>
    <li>
      <el-link :icon="Key" type="primary" @click="changeInfo('password')">
        &nbsp;修改密码
      </el-link>
    </li>
    <li>
      <el-link :icon="Van" type="primary" @click="changeInfo('exit')">
        &nbsp;退出登陆
      </el-link>
    </li>
  </ul>
  <form-data :isView="userinfo" @close="close()">
    <template #button><button type="button" @click="saveInfo()">保存信息</button></template>
    <template #title>修改信息</template>
    <template #form>
      <div class="input">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" v-model="myInfo.nickname">
      </div>

      <div class="input"><label for="studentID">学号:</label>
        <input type="text" id="studentID" name="studentID" v-model="myInfo.studentId">
      </div>

      <div class="input"><label for="major">专业:</label>
        <input type="text" id="major" name="major" v-model="myInfo.major">
      </div>

      <div class="input"><label for="class">班级:</label>
        <input type="text" id="class" name="class" v-model="myInfo.class">
      </div>
      <div class="input"><label for="email">邮箱:</label>
        <input type="text" id="email" name="email" v-model="myInfo.email">
      </div>
    </template>
  </form-data>
  <form-data :isView="password" @close="close()">
    <template #title>
      修改密码
    </template>
    <template #form>

      <div class="input">
        <label for="oldpassword">旧密码:</label>
        <input type="password" v-model="myPwd.oldPwd" id="oldpassword" name="name">
      </div>

      <div class="input"><label for="newpassword">新密码:</label>
        <input type="password" v-model="myPwd.newPwd" id="newpassword" name="newpassword">
      </div>

      <div class="input"><label for="confirmpassword">确认密码:</label>
        <input type="password" v-model="myPwd.confirmPwd" id="confirmpassword" name="major">
      </div>
    </template>

    <template #button>
      <button type="button" @click="savePassword()">确认修改</button>
    </template>
  </form-data>
</template>

<style scoped>
.el-link {
  font-size: 20px;
  margin-top: 10px;
}
</style>